<script setup>
import { ref, onMounted } from 'vue'
import View3jsAnimation from '@renderer/views/View3jsAnimation.vue'
import View3jsAnimationFBX from '@renderer/views/View3jsAnimationFBX.vue'

const landscapeview = ref(true)
onMounted(() => {
  if (document.documentElement.clientWidth / document.documentElement.clientHeight >= 1) {
    landscapeview.value = true
    document.documentElement.style.setProperty('--flexDirection', 'row')
    document.documentElement.style.fontSize =
      (document.documentElement.clientWidth * 9 + document.documentElement.clientHeight * 16) /
        2500 +
      'px'
  } else {
    landscapeview.value = false
    document.documentElement.style.setProperty('--flexDirection', 'column')
    document.documentElement.style.fontSize =
      (document.documentElement.clientWidth * 7 + document.documentElement.clientHeight * 12) /
        1800 +
      'px'
  }
})
</script>

<template>
  <div class="main_view" :class="landscapeview ? 'leftright' : 'updown'">
    <div class="el01"><View3jsAnimation></View3jsAnimation></div>
    <div class="el02">
      <View3jsAnimationFBX></View3jsAnimationFBX>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.main_view {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
}
.leftright {
  display: flex;
  flex-direction: row;
  .el01 {
    box-sizing: border-box;
    position: relative;
    height: 100vh;
    flex: 1;
    border: 0px solid red;
  }
  .el02 {
    box-sizing: border-box;
    position: relative;
    height: 100vh;
    flex: 1;
    border: 0px solid blue;
  }
}
.updown {
  display: flex;
  flex-direction: column;
  .el01 {
    box-sizing: border-box;
    position: relative;
    width: 100vw;
    flex: 1;
    border: 0px solid red;
  }
  .el02 {
    box-sizing: border-box;
    position: relative;
    width: 100vw;
    flex: 1;
    border: 0px solid blue;
  }
}
</style>
